<!--
 * @Author: 码农小宇
 * @Date: 2022-01-20 10:02:11
-->
<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="编号">
          <el-input
            type="number"
            v-model="formInline.id"
            placeholder="编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formInline.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input
            v-model="formInline.age"
            placeholder="年龄"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="户籍所在地">
          <el-input
            v-model="formInline.address"
            placeholder="户籍所在地"
            class="address"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" class="sex">
          <el-radio v-model="formInline.sex" label="1">男</el-radio>
          <el-radio v-model="formInline.sex" label="2">女</el-radio>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click='reset' >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card body">
      <div class="btn">

        <el-button type="primary" icon="el-icon-plus" @click='add'>添加</el-button>
          <el-dialog title="添加用户信息" :visible.sync="addVisible" width="30%">
            <el-form ref="addForm" :model="addForm" label-width="80px">
              <el-form-item label="编号">
            <el-input
              type="number"
              v-model="addForm.id"
              placeholder="编号"
            ></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="addForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input
                v-model="addForm.age"
                placeholder="年龄"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item label="户籍所在地">
              <el-input
                v-model="addForm.address"
                placeholder="户籍所在地"
                class="address"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" class="sex">
              <el-radio v-model="addForm.sex" label="1">男</el-radio>
              <el-radio v-model="addForm.sex" label="2">女</el-radio>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addreset">取 消</el-button>
            <el-button type="primary" @click="addsub">提交</el-button>
          </span>
        </el-dialog>

        <el-button type="success" icon="el-icon-edit-outline" :disabled='editDisabled' @click='edit' >修改</el-button>
        <el-dialog title="添加用户信息" :visible.sync="editVisible" width="30%">
            <el-form ref="addForm" :model="editForm" label-width="80px">
              <el-form-item label="编号">
            <el-input
              type="number"
              v-model="editForm.id"
              placeholder="编号"
            ></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="editForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input
                v-model="editForm.age"
                placeholder="年龄"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item label="户籍所在地">
              <el-input
                v-model="editForm.address"
                placeholder="户籍所在地"
                class="address"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" class="sex">
              <el-radio v-model="editForm.sex" label="1">男</el-radio>
              <el-radio v-model="editForm.sex" label="2">女</el-radio>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="editsub">提交</el-button>
          </span>
        </el-dialog>

        <el-button type="danger" icon="el-icon-error" :disabled='delDisabled' @click='del'>删除</el-button>

      </div>

      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"  @row-click='rowClick'  ref='multipleSelection'>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="编号" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.age }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.sex | sexFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="户口所在地" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click.native.stop="delOne(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
Vue.use('axios')
Vue.filter('sexFilter', (data) => {
  if (data === 1) {
    return '男'
  } else {
    return '女'
  }
})
export default {
  mounted () {
    axios.get('http://localhost:8888/list').then(res => {
      this.tableData = res.data.data
      this.oldData = res.data.data
      this.total = res.data.count
    })
  },
  data () {
    return {
      oldData: [],
      pageSizes: [5],
      currentPage: 1,
      total: null,
      formInline: {
        id: '',
        name: '',
        age: '',
        sex: null,
        address: ''
      },
      editDisabled: true,
      delDisabled: true,
      tableData: [],
      addVisible: false,
      editVisible: false,
      addForm: {
        id: '',
        name: '',
        age: '',
        sex: null,
        address: ''
      },
      editForm: {
        id: '',
        name: '',
        age: '',
        sex: null,
        address: ''
      },
      multipleSelection: []
    }
  },
  methods: {
    search () {
      if (this.formInline.id) {
        axios.get(`http://localhost:8888/list?id=${this.formInline.id}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.id = ''
        })
      }
      if (this.formInline.name) {
        axios.get(`http://localhost:8888/list?name=${this.formInline.name}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.name = ''
        })
      }
      if (this.formInline.sex) {
        axios.get(`http://localhost:8888/list?sex=${this.formInline.sex}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.sex = ''
        })
      }
      if (this.formInline.age) {
        axios.get(`http://localhost:8888/list?age=${this.formInline.age}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.age = ''
        })
      }
      if (this.formInline.address) {
        axios.get(`http://localhost:8888/list?address=${this.formInline.address}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.address = ''
        })
      }
    },
    reset () {
      this.formInline = {
        id: '',
        name: '',
        age: '',
        sex: '',
        address: ''
      }
      axios.get('http://localhost:8888/list').then(res => {
        this.tableData = res.data.data
        this.oldData = res.data.data
        this.total = res.data.count
      })
      this.tableData = this.oldData
    },
    rowClick (row) {
      const index = this.multipleSelection.findIndex(item =>
        item.id === row.id
      )

      if (index === -1) {
        this.$refs.multipleSelection.toggleRowSelection(row, true)
        this.multipleSelection.push(row)
      } else {
        this.$refs.multipleSelection.toggleRowSelection(row, false)
        this.multipleSelection.splice(index, 1)
      }
    },
    handleCurrentChange (val) {
      this.currentPage = val
      if (this.formInline.id) {
        axios.get(`http://localhost:8888/list?id=${this.formInline.id}&cur=${val}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.id = ''
        })
      }
      if (this.formInline.name) {
        axios.get(`http://localhost:8888/list?name=${this.formInline.name}&cur=${val}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.name = ''
        })
      }
      if (this.formInline.sex) {
        axios.get(`http://localhost:8888/list?sex=${this.formInline.sex}&cur=${val}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.sex = ''
        })
      }
      if (this.formInline.age) {
        axios.get(`http://localhost:8888/list?age=${this.formInline.age}&cur=${val}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.age = ''
        })
      }
      if (this.formInline.address) {
        axios.get(`http://localhost:8888/list?address=${this.formInline.address}&cur=${val}`).then(res => {
          this.tableData = res.data.data
          this.total = res.data.count
          // this.formInline.address = ''
        })
      }
      if (!this.formInline.id && !this.formInline.name && !this.formInline.sex && !this.formInline.age && !this.formInline.address) {
        axios.get(`http://localhost:8888/list?cur=${val}`).then(res => {
          this.tableData = res.data.data
        })
      }
    },
    add () {
      this.addVisible = true
    },
    addsub () {
      axios.post('http://localhost:8888/add', qs.stringify(/* {
        id: this.addForm.id,
        name: this.addForm.name,
        age: this.addForm.age,
        sex: this.addForm.sex,
        address: this.addForm.address
      } */ this.addForm),
      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
      ).then(res => {
        axios.get(`http://localhost:8888/list?cur=${this.currentPage}`).then(res => {
          this.tableData = res.data.data
          this.oldData = res.data.data
          this.total = res.data.count
        })
      })
      this.addForm = {
        id: '',
        name: '',
        age: '',
        sex: null,
        address: ''
      }
      this.addVisible = false
    },
    addreset () {
      this.addForm = {
        id: '',
        name: '',
        age: '',
        sex: null,
        address: ''
      }
      this.addVisible = false
    },
    del () {

    },
    delOne (i, t) {
      axios.get(`http://localhost:8888/del?id=${t.id}`).then(res => {
        axios.get(`http://localhost:8888/list?cur=${this.currentPage}`).then(res => {
          this.tableData = res.data.data
          this.oldData = res.data.data
          this.total = res.data.count
        })
      })
    },
    edit () {
      this.editVisible = true
    },
    editsub () {
      this.editVisible = false
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      if (this.multipleSelection.length === 1) {
        this.editDisabled = false
      } else {
        this.editDisabled = true
      }
      if (this.multipleSelection.length >= 1) {
        this.delDisabled = false
      } else {
        this.delDisabled = true
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.block{
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.sex {
  width: 100%;
}
.address {
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  position: relative;
}
.body{
  min-height: 480px;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.dialog-footer{
  display: flex;
  justify-content: center;
}
</style>
